<template>
  <div class="problemList">
    <div class="problem-R noControlPanel">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button type="success" @click="addItem('新增')"> <i class="el-icon-plus"></i>新增 </el-button>
        </el-form-item>
        <el-form-item label="字典类别:">
          <el-input placeholder="工单名称" clearable v-model="zidianleib" class="input-with-select"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('搜索')">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        :cell-class-name="addClass"
        :data="dictionaryData"
        stripe
        ref="zhankai"
        @select="isCheck"
        @select-all="isCheckAll"
        @row-dblclick="rowClick"
        highlight-current-row
        border
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="gddj" label="名称" min-width="100"></el-table-column>
        <el-table-column label="字典类别" min-width="100">
          <template>
            <el-tag>工单等级</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="tjsj" label="添加时间" min-width="100">
          <template slot-scope="scope">{{ scope.row.tjsj | dateFormat }}</template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" align="right">
          <template slot-scope="scope">
            <!-- 不可以点击加上 noAction这个类名 -->
            <div class="operations">
              <el-button type="text" @click="addItem('编辑', scope.row)">编辑</el-button>
              <span class="operation"></span>
              <el-button type="text" @click="color_f56f6f(scope.row)" class="color_f56f6f">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row">
        <el-col :span="12">
          <el-button type="danger" @click="delBtn" :disabled="deleteAll.length > 0 ? false : true">批量删除</el-button>
        </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
      <!-- 录入工单 抽屉 -->
      <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :wrapperClosable="false">
        <div class="addUer_title">
          <span>{{ title }}</span>
          <i class="el-icon-close addUer_icon" @click="offDrawer('faultValidateForm')"></i>
        </div>
        <el-form :model="faultValidateForm" :rules="rules" ref="faultValidateForm" label-width="130px">
          <el-row>
            <el-col :span="23">
              <el-form-item label="名称:" prop="typeName">
                <el-input placeholder="填写工单等级或工单类型名称" v-model="faultValidateForm.typeName" class="input-with-select"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="forms_fooer">
            <el-button class="users_btn" @click="offDrawer('faultValidateForm')">取消</el-button>
            <el-button type="primary" class="users_btn" @click="submitForm(title, 'faultValidateForm')">确定</el-button>
          </div>
        </el-form>
      </el-drawer>
    </div>
    <!-- 批量提示窗 -->
    <el-dialog title="批量删除" :visible.sync="dialogVisible" width="576px">
      <span style="color: #5a5e66" v-html="tips"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" style="padding: 9px 15px">取 消</el-button>
        <el-button type="primary" @click="deleteItem" style="padding: 9px 15px">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 单个删除 -->
    <el-dialog title="删除" :visible.sync="dialogVisible2" width="30%">
      <span>您确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="deleteItem2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { yeWu } from '@/utils/allUrl.js'
import { endLoading } from '@/utils/loading.js'
export default {
  data: function () {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      zidianleib: '',
      dictionaryData: [],
      drawer: false,
      faultValidateForm: {
        typeName: '',
        id: null,
      },
      dialogVisible: false, // 批量
      dialogVisible2: false, // 单个
      tips: '',
      rules: {
        typeName: [
          { required: true, message: '请填写字典名称', trigger: 'blur' },
          { pattern: /^([^\*\#\$\%\【\】\!\！\@\￥\$\[\]\{\}\^\&\*\`\~\"\'<>\/])+$/g, message: '不能输入特殊字符', trigger: 'blur' },
        ],
      },
      deleteAll: [],
      title: '',
      deleteID: '', // 删除id
    }
  },
  created: function () {
    // 获取数据
    this.getshuju()
  },
  methods: {
    async getshuju() {
      const a = setTimeout(() => {
        endLoading()
      }, 10000)
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      const { data: res } = await this.$http.post(`${yeWu}gdzd/list`, params)
      clearTimeout(a)
      endLoading()
      if (res.code === '0014') {
        return
      } else if (res.code === '0013') {
        this.total = 0
        return (this.dictionaryData = [])
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.dictionaryData = res.data.list
      this.total = res.data.countList
    },
    // 多选删除
    isCheck(selection, row) {
      const arrs = []
      selection.forEach((item) => {
        arrs.push(item.id)
      })
      const s1 = new Set(arrs)
      this.deleteAll = [...s1]
    },
    isCheckAll(selection, row) {
      const arrs = []
      selection.forEach((item) => {
        arrs.push(item.id)
      })
      const s1 = new Set(arrs)
      this.deleteAll = [...s1]
    },
    rowClick(row, column, event) {
      const a = this.deleteAll.findIndex((item) => item === row.id)
      if (a !== -1) {
        this.deleteAll.splice(a, 1)
        this.$refs.zhankai.toggleRowSelection(row, false)
      } else {
        this.deleteAll.push(row.id)
        const s1 = new Set(this.deleteAll)
        this.deleteAll = [...s1]
        this.$refs.zhankai.toggleRowSelection(row, true)
      }
    },
    async onSubmit(sign) {
      const params = new URLSearchParams()
      params.append('M_', sign === '搜索' ? 1 : this.currentPage)
      params.append('N_', sign === '搜索' ? 10 : this.pageSize)
      params.append('GDDJ', this.zidianleib)
      const { data: res } = await this.$http.post(`${yeWu}gdzd/list`, params)
      if (res.code === '0014') {
        return
      } else if (res.code === '0013') {
        this.total = 0
        return (this.dictionaryData = [])
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.dictionaryData = res.data.list
      this.total = res.data.countList
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      this.onSubmit('分页')
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.onSubmit('分页')
    },
    addItem(title, scope) {
      if (scope) {
        this.faultValidateForm.typeName = scope.gddj
        this.faultValidateForm.id = scope.id
      }
      this.title = title
      this.drawer = true
    },
    offDrawer(faultValidateForm) {
      this.$refs.faultValidateForm.resetFields()
      this.drawer = false
    },
    delBtn: function () {
      this.tips = `<svg
          class="iconfont"
          aria-hidden="true"
          style="width: 20px;height: 20px;vertical-align: middle;padding-right: 5px;"
        >
          <use xlink:href="#el-icon-mywarning" style="font-size:50px" />
        </svg>执行当前操作数据不可恢复，请谨慎操作！`
      this.dialogVisible = true
    },
    color_f56f6f(scope) {
      this.deleteID = scope.id
      this.dialogVisible2 = true
    },
    // 单个
    async deleteItem2() {
      const params = new URLSearchParams()
      params.append('ids', this.deleteID)
      const { data: res } = await this.$http.post(`${yeWu}gdzd/deletes`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.dialogVisible2 = false
      this.getshuju()
    },
    // 批量
    async deleteItem() {
      const params = new URLSearchParams()
      params.append('ids', this.deleteAll)
      const { data: res } = await this.$http.post(`${yeWu}gdzd/deletes`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.deleteAll = []
      this.dialogVisible = false
      this.getshuju()
    },
    submitForm(title, faultValidateForm) {
      const { typeName, id } = this.faultValidateForm
      const params = new URLSearchParams()
      params.append('GDDJ', typeName)
      this.$refs.faultValidateForm.validate(async (valid) => {
        if (valid) {
          if (title === '新增') {
            const { data: res } = await this.$http.post(`${yeWu}gdzd/create`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.drawer = false
            this.faultValidateForm = {
              typeName: '',
              id: '',
            }
            this.getshuju()
          } else {
            params.append('ID', id)
            const { data: res } = await this.$http.post(`${yeWu}gdzd/update`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.drawer = false
            this.faultValidateForm = {
              typeName: '',
              id: '',
            }
            this.getshuju()
          }
        } else {
          this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
          return false
        }
      })
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      // console.log('row:', row, 'column:', column, 'rowIndex:', rowIndex, 'columnIndex:', columnIndex)
      if (columnIndex === 1) {
        return 'fontColor'
      }
    },
  },
}
</script>
<style lang="scss" scoped>
$c333333: #333333;
$bE8E8E8: #e8e8e8;

.noControlPanel {
  padding-top: 0;
}
// 录入故障弹出界面样式
.drawarClass {
  .el-drawer__header {
    color: $c333333;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid $bE8E8E8;
    padding: 17px 0 17px 25px;
  }
  .el-form {
    padding-right: 25px;
    .el-form-item {
      &:last-child {
        position: fixed;
        bottom: 0px;
        right: 0px;
        border-top: 1px solid #e8e8e8;
        padding: 12px 0;
        margin-bottom: 0;
        z-index: 999;
        width: 30%;
        .el-form-item__content {
          text-align: right;
          margin-right: 24px;
          margin-left: 0 !important;
        }
      }
    }
  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-input-group__append {
    padding: 0 15px !important;
    background-color: #f5f7fa !important;
  }
}
// 分页样式
::v-deep .el-checkbox .el-checkbox__label {
  font-size: 12px;
}
::v-deep .drawarClass .el-drawer__header span {
  color: $c333333;
  font-size: 16px;
  font-weight: 600;
}
::v-deep .el-checkbox .el-checkbox__label {
  font-size: 12px;
}
.problemList .problem-R .el-form .el-form-item .el-input {
  width: 100%;
}
</style>
